import React from 'react';
import './FeatureList.css';
import { useNavigate } from 'react-router-dom';

const FeatureList: React.FC = () => {
  const navigate = useNavigate();

  // 处理各个功能项的跳转
  const handleProfileClick = () => {
    navigate('/index/profile/individual');
  };

  const handleTrainingsClick = () => {
    navigate('/index/profile/trainings');
  };

  const handleRemindClick = () => {
    navigate('/index/profile/remind');
  };

  const handleHelpClick = () => {
    navigate('/index/profile/help');
  };

  return (
    <div className="feature-list-container">
      <div className="feature-list">
        <div
          className="feature-item"
          onClick={handleProfileClick}
          role="button"
          tabIndex={0}
        >
          <div className="feature-content">
            <span className="feature-name">个人资料</span>
          </div>
        </div>
        
        {/* 我的训练项 */}
        <div
          className="feature-item"
          onClick={handleTrainingsClick}
          role="button"
          tabIndex={0}
        >
          <div className="feature-content">
            <span className="feature-name">我的训练</span>
          </div>
        </div>
        
        {/* 训练提醒项 */}
        <div
          className="feature-item"
          onClick={handleRemindClick}
          role="button"
          tabIndex={0}
        >
          <div className="feature-content">
            <span className="feature-name">训练提醒</span>
          </div>
        </div>
        
        {/* 帮助中心项 */}
        <div
          className="feature-item"
          onClick={handleHelpClick}
          role="button"
          tabIndex={0}
        >
          <div className="feature-content">
            <span className="feature-name">帮助中心</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default FeatureList;